<template>
  <div class="video-details">
    <el-date-picker v-if="params.isRecord || globalParams.startTime" style="margin-bottom: 10px; width: 100%;" :disabled-date="disabledDateFun" v-model="dateRange"
        start-placeholder="回溯开始时间" end-placeholder="回溯结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
        type="datetimerange" />
    <BVideo :url="url" v-if="url" :style="{height: params.isRecord || globalParams.startTime ? 'calc(100% - 42px)' : '100%'}"/>
  </div>
</template>
<script setup lang="ts">
import BVideo from '@/components/b-video/b-video.vue'
import { ref, onMounted, watch } from 'vue'
import { getFlvUrl } from '@/api/bvideo'
import { useAuthStore } from '@/store/auth'
import { storeToRefs } from 'pinia'

function disabledDateFun (time: Date) {
  return time.getTime() > Date.now()
}

const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  }
})

const url = ref('')
const dateRange = ref([])

const authStore = useAuthStore()
const { globalParams } = storeToRefs(authStore)
onMounted(async () => {
  if (props.params.isRecord) return
  if (globalParams.value.startTime && globalParams.value.endTime) {
    dateRange.value = [globalParams.value.startTime, globalParams.value.endTime]
    return
  }

  const {data} = await getFlvUrl({
    cameraUuid: props.params.cameraUuid,
    customerNo: props.params.customerNo,
    cameraType: props.params.cameraType,
    streamType: 0,
    type: 0
  })
  url.value = data.wsUrl
})

watch(
  () => dateRange.value,
  (val) => {
    if (val[0] && val[1]) {
      getFlvUrl({
        cameraUuid: props.params.cameraUuid,
        customerNo: props.params.customerNo,
        cameraType: props.params.cameraType,
        streamType: 0,
        type: 1,
        beginTime: val[0],
        endTime: val[1]
      }).then((res) => {
        url.value = res.data.wsUrl
      })
    }
  })
</script>
<style scoped lang="scss">
.video-details {
  width: 100%;
  height: 100%;
}
</style>
